<template>
  <div class='container'>
    <!-- 试题录入 -->
    <el-card>
    <span slot="header">试题录入</span>
    <el-form label-width="120px" :model="formData" :rules="rules" ref="formRef">
      <el-form-item label="学科" prop="subjectID">
        <el-select style="width:400px" v-model="formData.subjectID">
          <el-option
          v-for="( item,index) in subjectList"
          :label="item.label"
          :value="item.value"
          :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录" prop="catalogID">
        <el-select style="width:400px" v-model="formData.catalogID">
          <el-option
          v-for="( item,index) in dirList"
          :label="item.label"
          :value="item.value"
          :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业" prop="enterpriseID">
        <el-select style="width:400px" v-model="formData.enterpriseID">
          <el-option
          v-for="( item,index) in enterpriseList"
          :label="item.label"
          :value="item.value"
          :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-select style="width:198px" v-model="formData.province"  @change="handleProvince">
            <el-option
              v-for="item in citySelect.province"
              :key="item"
              :label="item"
              :value="item"
             >
             </el-option>
        </el-select>
        <el-select style="width:198px" class="select-city" v-model="formData.city">
           <el-option
               v-for="item in citySelect.cityDate"
               :key="item"
               :label="item"
               :value="item"
               >
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="direction">
        <el-select style="width:400px" v-model="formData.direction">
             <el-option
              v-for="item in directionList"
              :key="item"
              :label="item"
              :value="item"
             >
             </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题型" prop="questionType">
        <el-radio-group v-model="formData.questionType" @change="changeRadio">
            <el-radio :label="'1'">单选</el-radio>
            <el-radio :label="'2'">多选</el-radio>
            <el-radio :label="'3'">简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="formData.difficulty">
            <el-radio :label="'1'">简单</el-radio>
            <el-radio :label="'2'">一般</el-radio>
            <el-radio :label="'3'">困难</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="题干" prop="question" style="height:300px">
        <quill-editor
            v-model="formData.question"
            :options="editorOption"
            style=" height:240px"
            >
        </quill-editor>
      </el-form-item>
      <!-- 单选选项 -->
      <el-form-item label="选项" prop="options" v-if="formData.questionType === '1'">
         <div class="option_item" v-for=" (item,index) in formData.options" :key="index">
          <el-radio :label="item.code" v-model="formData.radio">{{ item.code + ':'}}</el-radio>
          <el-input style="width:240px" v-model="item.title"></el-input>
        </div>
        <el-button type="danger" size="small" disabled>
          <i class="el-icon-plus">增加选项与答案</i>
        </el-button>
      </el-form-item>
      <!-- 多选选项 -->
      <el-form-item label="选项" prop="options" v-if="formData.questionType === '2'">
        <div class="option_item"
          v-for="(item,index) in formData.options"
          :key="item.key">
          <el-checkbox :label="item.code" v-model="formData.checkList">{{ String.fromCharCode(lettr + index)+':' }}</el-checkbox>
          <el-input style="width:240px" v-model="item.title"></el-input>
        </div>
        <el-button type="danger" size="small" @click="addDomain">
          <i class="el-icon-plus">增加选项与答案</i>
        </el-button>
      </el-form-item>
      <el-form-item label="解析视频" prop="videoURL">
        <el-input style="width:400px" v-model="formData.videoURL"></el-input>
      </el-form-item>
      <el-form-item label="答案解析" prop="answer" style="height:300px">
        <quill-editor
            v-model="formData.answer"
            :options="editorOption"
            style=" height:240px"
            >
        </quill-editor>
      </el-form-item>
      <el-form-item label="题目备注" prop="remarks">
        <el-input type="textarea" style="width:400px" v-model="formData.remarks"></el-input>
      </el-form-item>
      <el-form-item label="试题标签" prop="tags">
        <el-select style="width:400px" v-model="formData.tags" >
          <el-option
          v-for="( item,index) in labelList"
          :label="item.lable"
          :value="item.label"
          :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addQuestions" v-if="!this.questionId">确认提交</el-button>
        <el-button type="success" @click="addQuestions" v-if="this.questionId">确认修改</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import { simple as subjectSimple } from '@/api/hmmm/subjects'
import { simple as dirSimple } from '@/api/hmmm/directorys'
import { simple as labelSimple } from '@/api/hmmm/tags'
import { list } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction } from '@/api/hmmm/constants.js'
import { add, update, detail } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 省市
        city: '', // 城市
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ],
        radio: '', // 单选选项
        checkList: [], // 多选选项
        videoURL: '', // 视频解析
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      rules: {
        subjectID: [{ required: true, message: '学科不能为空', trigger: 'blur' }], // 学科
        catalogID: [{ required: true, message: '目录不能为空', trigger: 'blur' }], // 目录
        enterpriseID: [{ required: true, message: '企业不能为空', trigger: 'blur' }], // 企业
        city: [{ required: true, message: '城市不能为空', trigger: 'blur' }], // 城市
        direction: [{ required: true, message: '方向不能为空', trigger: 'blur' }], // 方向
        questionType: [{ required: true, message: '请选择题型', trigger: 'blur' }], // 题型
        difficulty: [{ required: true, message: '请选择难度', trigger: 'blur' }], // 难度
        question: [{ required: true, message: '题干不能为空，请输入题干', trigger: 'blur' }], // 题干
        answer: [{ required: true, message: '答案解析不能为空 请输入解析', trigger: 'blur' }] // 答案解析
      },
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ align: [] }], // 对齐方式
            ['image', 'video'] // 上传图片、上传视频
          ]
        }
      },
      // checkList: [],
      subjectList: [], // 学科列表详情
      dirList: [], // 目录列表详情
      enterpriseList: [], // 企业列表详情
      citySelect: {
        province: [],
        cityDate: []
      }, // 所有城市列表详情
      directionList: direction, // 方向列表详情
      labelList: [], // 试题标签列表详情
      lettr: 65,
      index: 3,
      questionId: this.$route.query.id
    }
  },
  components: {
    quillEditor
  },
  created () {
    this.getsubjectSimple()
    this.getDirSimple()
    this.getLabelSimple()
    this.getEnterpriseList()
    this.getCityData()
    this.updataQuestion()
  },
  methods: {
    // 获取学科简单列表
    async  getsubjectSimple () {
      const { data } = await subjectSimple()
      // console.log(data)
      this.subjectList = data
    },
    // 获取目录简单列表
    async getDirSimple () {
      const { data } = await dirSimple()
      // console.log(data)
      this.dirList = data
    },
    // 获取企业简单列表
    async getEnterpriseList () {
      const { data: { items } } = await list()
      // console.log(data)
      // console.log(items)
      items.forEach(item => {
        this.enterpriseList.push({ label: item.company, value: item.id })
      })
      // console.log(this.enterpriseList)
    },
    // 获取省
    getCityData  () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
    },
    // 获取试题标签列表
    async getLabelSimple () {
      const { data } = await labelSimple()
      this.labelList = data
    },
    addDomain () {
      this.index++
      this.formData.options.push(
        { isRight: false, code: `${String.fromCharCode(this.lettr + this.index)}`, title: '', img: '' }
      )
    },
    // 试题录入和修改
    async addQuestions () {
      this.$refs.formRef.validate()
      if (!this.questionId) {
        await add({ ...this.formData })
        this.$message.success('试题录入成功！')
      } else {
        await update({ ...this.formData, id: this.questionId })
        this.$message.success('试题修改成功')
      }
      this.$router.push('/questions/list')
    },
    // 题库数据渲染
    async updataQuestion () {
      if (this.questionId) {
        const { data } = await detail({ id: this.questionId })
        console.log(data)
        this.formData = data
      }
    },
    changeRadio (value) {
      console.log(value)
      if (value === '1') {
        this.formData.options = [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ]
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;
  .select-city {
    margin-left: 4px;
  }
  .el-rideo {
   margin-right: 0px;
  }
  .option_item {
    padding-bottom: 20px;
    .el-checkbox:last-of-type{
      margin-right: 30px;
    }
  }
}
</style>
